<template>
  <view class="container">
    <view class="title">修改密码</view>
    <view class="form">
      <view class="input-group">
        <text class="label">原密码</text>
        <input
          type="password"
          v-model="oldPassword"
          placeholder="请输入原密码"
          class="input"
        />
      </view>
      <view class="input-group">
        <text class="label">新密码</text>
        <input
          type="password"
          v-model="newPassword"
          placeholder="请输入新密码"
          class="input"
        />
      </view>
      <view class="input-group">
        <text class="label">确认密码</text>
        <input
          type="password"
          v-model="confirmPassword"
          placeholder="请再次输入新密码"
          class="input"
        />
      </view>
      <view class="error-message" v-if="errorMessage">{{ errorMessage }}</view>
      <button class="submit-btn" @click="submit">确认修改</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { editDevicePassword } from "@/api/wuLian";
import { onLoad } from "@dcloudio/uni-app";
const mac = ref("");
onLoad((option) => {
  mac.value = option.mac;
});
const oldPassword = ref("");
const newPassword = ref("");
const confirmPassword = ref("");
const errorMessage = ref("");

const validatePassword = () => {
  // 清空之前的错误信息
  errorMessage.value = "";

  // 检查是否所有字段都已填写
  if (!oldPassword.value || !newPassword.value || !confirmPassword.value) {
    errorMessage.value = "请填写所有密码字段";
    return false;
  }

  // 检查新旧密码是否相同
  if (oldPassword.value === newPassword.value) {
    errorMessage.value = "新密码不能与原密码相同";
    return false;
  }

  // 检查两次新密码输入是否一致
  if (newPassword.value !== confirmPassword.value) {
    errorMessage.value = "两次输入的新密码不一致";
    return false;
  }

  return true;
};

const submit = () => {
  if (validatePassword()) {
    // TODO: 调用修改密码的API
    editDevicePassword({
      mac: mac.value,
      password: oldPassword.value,
      new_password: newPassword.value,
    }).then((res) => {
      if (res.code === 0) {
        uni.showToast({
          title: "密码修改成功",
          icon: "success",
        });
        uni.navigateBack();
      }else{
		uni.showToast({
			title: res.msg,
			icon: 'none'
		})
	  }
    });
  }
};
</script>

<style>
.container {
  padding: 30rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 60rpx;
}

.form {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 10rpx;
}

.input-group {
  margin-bottom: 30rpx;
}

.label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.error-message {
  color: #ff0000;
  font-size: 24rpx;
  margin-bottom: 20rpx;
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  background-color: #E60012;
  color: #fff;
  font-size: 32rpx;
  border-radius: 8rpx;
  margin-top: 40rpx;
}
</style>
